<template>
  <div>
    <h1>事件总线/事件中心</h1>
    <span>eventBus用于组件之间的通信，但是对于复杂的组件通信，推荐使用vuex</span>
    <a href="https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换">事件中心官方文档</a>
    <el-button @click="handleAddComponent">增加</el-button>
    <el-button @click="sendMsgGlobal">全局发送消息</el-button>
    <div v-for="i in componentCount" :key="i">
      <EventBusComponent :id="i"></EventBusComponent>
    </div>
  </div>
</template>

<script>
// import '../executeJs/noExportJs'; // 可以立即执行js，并且只会执行一次
// 在组件中
import EventBusComponent from './EventBusComponent.vue';
export default {
  components: {
    EventBusComponent
  },
  created () {
    console.log(window.msg)
  },
  data () {
    return {
      componentCount: 0
    }
  },
  methods: {
    handleAddComponent () {
      this.componentCount += 1;
    },
    sendMsgGlobal () {
      this.$EventBus.$emit("event1", "helloworld")
    }
  }
}
</script>

<style>
</style>